<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useUserInfoStore from '@/stores/userInfo'
import { useTokenStore } from '@/stores/token'
import {
  Search,
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const searchKeyword = ref('')
const userInfoStore = useUserInfoStore()
const tokenStore = useTokenStore()

// 计算当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 用户信息相关
const isLoggedIn = computed(() => !!tokenStore.token)
const userInfo = computed(() => userInfoStore.info || {})
const userAvatar = computed(() => userInfo.value.avatar || '')

// 搜索方法
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      path: '/search',
      query: { keyword: searchKeyword.value.trim() }
    })
  }
}

const goToLogin = () => {
  router.push('/login')
}

const goToProfile = () => {
  router.push('/user/profile')
}

const handleLogout = () => {
  tokenStore.removeToken()
  userInfoStore.removeInfo()

  //清除本地存储数据
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  
  // // 获取当前标签页ID
  // const tabId = sessionStorage.getItem('tabId')
  // if (tabId) {
  //   // 清除当前标签页的localStorage数据
  //   localStorage.removeItem(`token-${tabId}`)
  // }
  
  // // 清除所有localStorage中的token数据（为了确保完全清除）
  // Object.keys(localStorage).forEach(key => {
  //   if (key.startsWith('token-')) {
  //     localStorage.removeItem(key)
  //   }
  // })
  
  // // 清除tabId
  // sessionStorage.removeItem('tabId')
  
  // 强制跳转到登录页
  router.push('/login')
}
</script>

<template>
  <header class="user-header">
    <div class="header-container">
      <!-- 标题区域 -->
      <div class="title-section">
        <img src="@/assets/images/logo.jpg" alt="校园信息平台" class="logo-image" />
      </div>

      <!-- 主要功能区 -->
      <div class="main-function-area">
        <!-- 功能导航 -->
        <el-menu
          :default-active="activeMenu"
          mode="horizontal"
          class="function-menu"
          router
        >
        
          <el-menu-item index="/" class="menu-item">
            <img src="@/assets/images/userHeader/首页.svg" class="menu-icon svg-icon" alt="首页">
            <span class="menu-text">首页</span>
          </el-menu-item>

          <!-- 校园生活下拉菜单 -->
          <el-sub-menu 
            index="校园生活"
            class="menu-item" 
            :show-timeout="50" 
            :hide-timeout="50" 
            teleported
            popper-class="campus-life-popup"
          >
            <template #title>
              <img src="@/assets/images/userHeader/校园生活.svg" class="menu-icon svg-icon" alt="校园生活" />
              <span class="menu-text">校园生活</span>
            </template>
            <el-menu-item index="二手市场" @click="$router.push('/live/Market')">
              <img src="@/assets/images/userHeader/二手市场.svg" class="menu-icon svg-icon" alt="二手市场">
              <span>二手市场</span>
            </el-menu-item>
            <el-menu-item index="失物招领" @click="$router.push('/live/LostFound')">
              <img src="@/assets/images/userHeader/失物招领.svg" class="menu-icon svg-icon" alt="失物招领">
              <span>失物招领</span>
            </el-menu-item>
            <el-menu-item index="拼车交友" @click="$router.push('/live/CarFriends')">
              <img src="@/assets/images/userHeader/拼车交友.svg" class="menu-icon svg-icon" alt="拼车交友">
              <span>拼车交友</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 校园机遇下拉菜单 -->
          <el-sub-menu 
            index="校园机遇"
            class="menu-item" 
            :show-timeout="50" 
            :hide-timeout="50" 
            teleported
            popper-class="campus-opportunity-popup"
          >
            <template #title>
              <img src="@/assets/images/userHeader/校园机遇.svg" class="menu-icon svg-icon" alt="校园机遇" />
              <span class="menu-text">校园机遇</span>
            </template>
            <el-menu-item index="实习兼职" @click="$router.push('/chance/Woek')">
              <img src="@/assets/images/userHeader/实习就业.svg" class="menu-icon svg-icon" alt="实习兼职" />
              <span>实习/兼职信息</span>
            </el-menu-item>
            <el-menu-item index="社团活动" @click="$router.push('/chance/Mass')">
              <img src="@/assets/images/userHeader/社团活动.svg" class="menu-icon svg-icon" alt="社团活动">
              <span>社团活动</span>
            </el-menu-item>
            <el-menu-item index="学习交流" @click="$router.push('/chance/Study')">
              <img src="@/assets/images/userHeader/学习交流.svg" class="menu-icon svg-icon" alt="学习交流">
              <span>学习交流</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 信息发布下拉菜单 -->
          <el-sub-menu 
            index="信息发布"
            class="menu-item" 
            :show-timeout="50" 
            :hide-timeout="50" 
            teleported
            popper-class="post-create-popup"
          >
            <template #title>
              <img src="@/assets/images/userHeader/信息发布.svg" class="menu-icon svg-icon" alt="信息发布">
              <span class="menu-text">信息发布</span>
            </template>
            <el-menu-item index="/post/create" @click="$router.push('/post/create')">
              <img src="@/assets/images/userHeader/文章发布.svg" class="menu-icon svg-icon" alt="普通文章">
              <span>普通文章</span>
            </el-menu-item>
            <el-menu-item index="/post/WoekCreate" @click="$router.push('/post/WoekCreate')">
              <img src="@/assets/images/userHeader/招聘.svg" class="menu-icon svg-icon" alt="招聘文章">
              <span>招聘文章</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 消息 -->
          <el-menu-item index="/messages" class="menu-item">
            <el-badge is-dot>
              <img src="@/assets/images/userHeader/消息.svg" class="menu-icon svg-icon" alt="消息">
            </el-badge>
            <span class="menu-text">消息</span>
          </el-menu-item>

        </el-menu>

        <!-- 搜索框 -->
        <div class="search-section">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索"
            @keyup.enter="handleSearch"
            class="search-input"
          >
            <template #prefix>
              <el-icon class="search-icon"><Search /></el-icon>
            </template>
            <!-- 添加搜索按钮 -->
            <template #append>
              <el-button :icon="Search" @click="handleSearch" />
            </template>
          </el-input>
        </div>

        <!-- 注册/登录按钮 -->
        <div class="auth-button">
          <el-dropdown v-if="isLoggedIn">
            <div class="user-info">
              <el-avatar :size="32" :src="userAvatar" />
              <span class="user-name">{{ userInfo.nickname || userInfo.username }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button v-else type="text" class="register-login" @click="goToLogin">注册/登录</el-button>
        </div>
      </div>
    </div>
  </header>
</template>

<style scoped>
.user-header {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  overflow: hidden;
  margin-bottom: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container {
  display: flex;
  align-items: center;
  padding: 0 40px;
  height: 120px;
  max-width: 1600px;
  margin: 0 auto;
}

/* 标题区域样式 */
.title-section {
  flex: 0 0 auto;
  margin-right: 40px;
}

.logo-image {
  height: 100px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* 主要功能区域 */
.main-function-area {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px; /* 减小间距 */
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-name {
  color: #000000;
  font-size: 14px;
}

/* 搜索框样式 */
.search-section {
  flex: 0 0 350px; /* 增加搜索框宽度 */
  margin: 0 15px; /* 增加左右边距 */
}

.search-input :deep(.el-input__inner) {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #000000; /* 修改文字颜色为黑色，以便在白色背景上可见 */
  border-radius: 8px;
  padding-left: 40px;
  height: 44px; /* 增加高度 */
}

.search-input :deep(.el-input__inner)::placeholder {
  color: rgba(0, 0, 0, 0.5); /* 修改占位符颜色为半透明黑色 */
}

.search-input :deep(.el-input__inner):focus {
  border-color: #3e92cc;
  box-shadow: 0 0 0 2px rgba(62, 146, 204, 0.2);
}

.search-icon {
  color: rgba(0, 0, 0, 0.5); /* 修改图标颜色为半透明黑色 */
  margin-left: 12px;
}

/* 优化搜索框按钮样式 */
.search-input :deep(.el-input-group__append) {
  background-color: transparent;
  border: none;
  padding: 0 10px;
}

.search-input :deep(.el-button) {
  background-color: #3e92cc; /* 使用蓝色背景 */
  border: none;
  color: white;
  border-radius: 0 8px 8px 0; /* 只圆角右侧 */
  transition: background-color 0.3s ease;
  height: 44px; /* 与输入框高度一致 */
  padding: 0 15px; /* 增加按钮内边距 */
}

.search-input :deep(.el-button:hover) {
  background-color: #2a7aad; /* 悬停时加深蓝色 */
}

/* 添加对搜索框容器的样式优化 */
.search-input :deep(.el-input-group) {
  height: 44px; /* 与输入框高度一致 */
  align-items: center;
}

/* 功能菜单样式 */
.function-menu {
  flex: 1;
  background-color: transparent;
  border: none;
  display: flex;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
  display: flex;
  align-items: center;
}

.menu-item {
  position: relative;
  color: #000000; /* 修改文字颜色为黑色 */
  margin: 0 4px; /* 减小外边距 */
  padding: 0 12px; /* 减小内边距 */
  height: 44px; /* 增加高度 */
  line-height: 44px;
  border-radius: 8px; /* 增加圆角 */
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

/* 增强悬停效果 - 使用更明显的蓝色背景 */
.menu-item:hover {
  background-color: #2a7aad; /* 更深的蓝色 */
  color: #ffffff;
  transform: translateY(-2px); /* 添加轻微上移效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

:deep(.el-menu-item.is-active) {
  background-color: rgba(62, 146, 204, 0.2);
  color: #3e92cc;
  font-weight: 500;
}

/* 增强菜单项的过渡动画 */
:deep(.el-menu-item), :deep(.el-sub-menu__title) {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-menu-item.is-active) {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-sub-menu__title) {
  color: #000000; /* 修改文字颜色为黑色 */
  padding: 0 12px; /* 减小内边距 */
  height: 44px; /* 增加高度 */
  line-height: 44px;
  border-radius: 8px; /* 增加圆角 */
  display: flex;
  align-items: center;
}

/* 增强子菜单标题悬停效果 */
:deep(.el-sub-menu__title:hover) {
  background-color: #2a7aad; /* 更深的蓝色 */
  color: #ffffff;
  transform: translateY(-2px); /* 添加轻微上移效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.menu-icon {
  margin-right: 6px; /* 调整图标和文字间距 */
  font-size: 18px; /* 增加图标大小 */
}

.svg-icon {
  width: 18px; /* 增加图标宽度 */
  height: 18px; /* 增加图标高度 */
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}

.menu-text {
  font-size: 15px; /* 增加文字大小 */
  font-weight: 500; /* 增加字重 */
}

/* 下拉菜单独立显示设置 */
:deep(.campus-life-popup),
:deep(.campus-opportunity-popup),
:deep(.post-create-popup) {
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  transform: none !important;
  min-width: 200px;
  /* 添加下拉菜单动画 */
  animation: slideDown 0.3s ease forwards;
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
  overflow: hidden; /* 确保圆角生效 */
}

/* 添加下拉菜单动画关键帧 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-container {
    padding: 0 20px;
  }
  
  .menu-text {
    display: none;
  }
  
  .menu-icon {
    margin-right: 0;
  }
  
  .search-section {
    flex: 0 0 250px; /* 减小搜索框宽度 */
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    height: auto;
    padding: 20px;
    gap: 20px;
  }
  
  .title-section {
    margin-right: 0;
    align-self: flex-start;
  }
  
  .main-function-area {
    flex-direction: column;
    width: 100%;
    gap: 15px;
  }
  
  .search-section {
    flex: 0 0 auto;
    width: 100%;
    margin: 0; /* 移除边距 */
  }
  
  .function-menu {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  
  .wave-decoration {
    height: 25px;
  }
}
</style>

<style>
/* 全局样式 - 用于下拉菜单项 */
.campus-life-popup .el-menu-item,
.campus-opportunity-popup .el-menu-item,
.post-create-popup .el-menu-item {
  color: #333;
  padding: 12px 20px;
  transition: all 0.3s ease;
}

.campus-life-popup .el-menu-item:hover,
.campus-opportunity-popup .el-menu-item:hover,
.post-create-popup .el-menu-item:hover {
  background-color: #2a7aad;
  color: #fff;
  transform: translateX(5px);
}

.campus-life-popup .el-menu-item.is-active,
.campus-opportunity-popup .el-menu-item.is-active,
.post-create-popup .el-menu-item.is-active {
  background-color: rgba(62, 146, 204, 0.2);
  color: #3e92cc;
  font-weight: 500;
}
</style>